<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>user</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script th:inline="javascript" language="javascript" type="text/javascript">
        $(function(){

            $("#selectId").change(function () {
                var option = $(this).val();
                if (option === 'default'){
                    $("#roomId").val("");
                } else {
                    $("#roomId").val(option);
                }
            });
            
            $("#aId").click(function () {
                var room = $("#roomId").val();
                if (null === room || room === "" || room === "default") {
                    alert("请选择或者输入聊天室名称");
                } else {
                    var id = [[${user.id}]];
                    window.location.href='/websocket/' + room + '/' + parseInt(id);
                }
            });


        });

    </script>
</head>
    <body>
    <table>
        <thead>
            <tr>
                <td colspan="3"><p th:text="'Welcome '+ ${user.name} + ' !'"/></td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>【聊天室】：</td>
                <td><input th:id="roomId" th:name="room" th:type="text"/>
                    <select th:id="selectId" th:name="select" th:onchange="">
                        <option th:value="default">选择</option>
                        <option th:each="room:${roomList}" th:value="${room.name}" th:text="${room.name}"></option>
                    </select>
                </td>
                <td></td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td></td>
                <td><a id="aId" href="javascript:void(0);" target="_blank"><input th:type="button" th:value="进入聊天室"></a></td>
                <td></td>
            </tr>
        </tfoot>
    </table>
    </body>
</html>